<template>
	<view>
		<view class="content">
			<view class="title">{{qNumber}}、{{qTitle}}</view>
			<view class="options" v-for="(item, i) in qOptions" :key="i">
				<view class="option-item">{{item.value}}</view>
				<view class="operation">
					<view class="iconfont left" @click="left">&#xe69c;</view>
					<view class="iconfont right" @click="right">&#xe603;</view>
				</view>
			</view>
		</view>
		<view class="show" v-if="prepare">
			<histogram-chart :dataAs="result" ref="chart" labelKey="label" valueKey="value" :yAxisAs="{
                formatter: {
                    type: 'Number'
                }
            }" />
		</view>
	</view>
</template>

<script>
	import HistogramChart from '@/components/stan-ucharts/HistogramChart.vue';
	import * as question from '@/api/questionnaire.js';
	export default {
		components: {
			HistogramChart,
		},
		data() {
			return {
				qid: '', //问卷id
				number: 0, //人的数量
				qNumber: 1, //题号
				qTitle: 'Loading',
				qOptions: [{
					type: 'A',
					value: '非常不满意'
				}, {
					type: 'B',
					value: '不满意'
				}, {
					type: 'C',
					value: '一般'
				}, {
					type: 'D',
					value: '满意'
				}, {
					type: 'E',
					value: '非常满意'
				}],
				result: {},
				questions: [],
				prepare: false,
			}
		},
		methods: {
			getData() {
				uni.showLoading({
					title:"统计中..."
				})
				// 1. 选得到问题以及选项
				question.getQuestionnaireDetail({
					questionnaireId: this.qid
				}).then(res0 => {
					for (let item of res0.data.data[0].list) {
						let questionObj = {
							questionId: '',
							questionTitle: '',
							options: []
						}
						questionObj.questionId = item.questionnaireQuestion.questionnaireQuestionId //题号
						questionObj.questionTitle = item.questionnaireQuestion.questionnaireSubjectContent //题目
						for (let k of item.questionnaireOptions) {
							questionObj.options.push({
								optionContent: k.optionContent,
								optionType: k.optionType,
								count: 0
							})
						}
						this.questions.push(JSON.stringify(questionObj))
					}
					// 2. 得到数据：第一步人，第二步数据
					question.getQuestionAnswerList({
						questionnaireId: this.qid
					}).then(res1 => {
						this.number = res1.data.data.length
						for (let item of res1.data.data) {
							question.getQuestionAnswerDetailList({ //通过人的id得到数据
								userId: item.userId,
								answer: 1,
								questionnaireId: this.qid,
							}).then(res2 => {
								for (let i in res2.data.data.list) { //i是第几个问题
									let obj = JSON.parse(this.questions[i])
									for (let j in obj.options) {
										if (obj.options[j].optionType == res2.data.data.list[i].questionnaireAnswer.answer) {
											obj.options[j].count++
											break
										}
									}
									this.questions[i] = JSON.stringify(obj)
								}
								this.number--
								if (this.number == 0) { //统计完毕，第一个题目
									let obj = JSON.parse(this.questions[0])
									this.qNumber = obj.questionId
									this.qTitle = obj.questionTitle
									this.qOptions = []
									this.result = {
										label: [],
										value: [{
											name: '人数',
											data: []
										}]
									}
									for (let i in obj.options) {
										this.qOptions.push({
											type: String.fromCharCode(64 + Number(obj.options[i].optionType)),
											value: obj.options[i].optionContent
										})
										this.result.label.push(obj.options[i].optionContent)
										this.result.value[0].data.push(obj.options[i].count)
									}
									uni.hideLoading()
									this.prepare = true
								}
							}).catch(err=>{
								uni.hideLoading()
								console.log(err)
							})
						}
						if(this.number==0){
							let obj = JSON.parse(this.questions[0])
							this.qNumber = obj.questionId
							this.qTitle = obj.questionTitle
							this.qOptions = []
							this.result = {
								label: [],
								value: [{
									name: '人数',
									data: []
								}]
							}
							for (let i in obj.options) {
								this.qOptions.push({
									type: String.fromCharCode(64 + Number(obj.options[i].optionType)),
									value: obj.options[i].optionContent
								})
								this.result.label.push(obj.options[i].optionContent)
								this.result.value[0].data.push(obj.options[i].count)
							}
							uni.hideLoading()
							this.prepare = true
						}
					}).catch(err => {
						uni.hideLoading()
						console.log(err)
					})
				}).catch(err => {
					uni.hideLoading()
					console.log(err)
				})
			},
			left() {
				if(this.qNumber == 1){
					uni.showToast({
						icon:'none',
						title:'已达第一题'
					})
					return
				}
				this.prepare = false
				uni.showLoading({
					title:"统计中..."
				})
				this.qNumber--
				let obj = JSON.parse(this.questions[this.qNumber-1])
				this.qTitle = obj.questionTitle
				this.qOptions = []
				this.result = {
					label: [],
					value: [{
						name: '人数',
						data: []
					}]
				}
				for (let i in obj.options) {
					this.qOptions.push({
						type: String.fromCharCode(64 + Number(obj.options[i].optionType)),
						value: obj.options[i].optionContent
					})
					this.result.label.push(obj.options[i].optionContent)
					this.result.value[0].data.push(obj.options[i].count)
				}
				setTimeout(()=>{
					uni.hideLoading()
					this.prepare = true
				},1000)
			},
			right() {
				if(this.qNumber == this.questions.length){
					uni.showToast({
						icon:'none',
						title:'已达最后一题'
					})
					return
				}
				this.prepare = false
				uni.showLoading({
					title:"统计中..."
				})
				this.qNumber++
				let obj = JSON.parse(this.questions[this.qNumber-1])
				this.qTitle = obj.questionTitle
				this.qOptions = []
				this.result = {
					label: [],
					value: [{
						name: '人数',
						data: []
					}]
				}
				for (let i in obj.options) {
					this.qOptions.push({
						type: String.fromCharCode(64 + Number(obj.options[i].optionType)),
						value: obj.options[i].optionContent
					})
					this.result.label.push(obj.options[i].optionContent)
					this.result.value[0].data.push(obj.options[i].count)
				}
				setTimeout(()=>{
					uni.hideLoading()
					this.prepare = true
				},1000)
			}
		},
		onLoad(option) {
			this.qid = option.qid
			this.getData()
		}
	}
</script>

<style>
	.iconfont {
		font-family: "iconfont" !important;
		/* font-size: 20px; */
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	.content {
		text-align: center;
		font-family: 'Courier New', Courier, monospace;
		position: relative;
	}

	.content .title {
		margin: 10px;
	}

	.show {
		width: 90%;
		/* margin: 0 5%; */
	}

	.operation {
		font-size: 40px;
		color: #939393;
	}

	.left {
		position: absolute;
		bottom: 30px;
		left: 20px;
	}

	.right {
		position: absolute;
		bottom: 30px;
		right: 20px;
	}
</style>
